<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Measure distances</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="turf" src="./static/libs/include-openlayers-local.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>

  <div id='map'></div>

  <script>
    var map = new ol.Map({
      //地图容器div的ID
      target: 'map',
      //地图容器中加载的图层
      layers: [],
      //地图视图设置
      view: new ol.View({
        //地图初始中心点
        center: ol.proj.fromLonLat([-122.801742, 45.48565]),
        //地图初始显示级别
        zoom: 10,
        //最小级别
        minZoom: 1,
        //最大级别
        maxZoom: 20
      })
    });

    var geojson, poly1, poly2;
    initMap();
    loadData();
    interSect();
    updateView();

    function initMap() {
      map.addLayer(new ol.layer.Tile({
        source: new ol.source.TileImage({
          url: 'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=' +
            'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw'
        })
      }))
    }

    function loadData() {
      poly1 = turf.polygon([
        [
          [-122.801742, 45.48565],
          [-122.801742, 45.60491],
          [-122.584762, 45.60491],
          [-122.584762, 45.48565],
          [-122.801742, 45.48565]
        ]
      ]);

      poly2 = turf.polygon([
        [
          [-122.520217, 45.535693],
          [-122.64038, 45.553967],
          [-122.720031, 45.526554],
          [-122.669906, 45.507309],
          [-122.723464, 45.446643],
          [-122.532577, 45.408574],
          [-122.487258, 45.477466],
          [-122.520217, 45.535693]
        ]
      ]);
    }

    function interSect() {
      geojson = turf.intersect(poly1, poly2);
    }

    function updateView() {
      var intersectsource = new ol.source.Vector();
      var originsource = new ol.source.Vector();

      let oljson = new ol.format.GeoJSON();

      let feature = oljson.readFeature(poly1);
      feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
      originsource.addFeature(feature);

      feature = oljson.readFeature(poly2);
      feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
      originsource.addFeature(feature);

      feature = oljson.readFeature(geojson);
      feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
      intersectsource.addFeature(feature);

      map.addLayer(new ol.layer.Vector({
        source: originsource,
        style: function () {
          return new ol.style.Style({
            fill: new ol.style.Fill({
              color: 'rgba(0, 0, 255, 0.1)'
            }),
            stroke: new ol.style.Stroke({
              color: 'blue',
              width: 1
            })
          })
        }
      }))

      map.addLayer(new ol.layer.Vector({
        source: intersectsource,
        style: function () {
          return new ol.style.Style({
            fill: new ol.style.Fill({
              color: 'rgba(255, 0, 0, 0.1)'
            }),
            stroke: new ol.style.Stroke({
              color: 'red',
              width: 5
            })
          })
        }
      }))

    }
  </script>

</body>

</html>